<template>
  <div class="custom-table">
    <div class="custom-table-title">
      {{ $store.getters.schoolName }}月工作计划表
    </div>
    <div class="custom-table-header">
      <div><span>班级：{{ tableData[0].className }}</span></div>
      <div class="borderL" style="text-align: center;">
        <span>日期：</span>{{tableData[0].monthTime}}
      </div>
    </div>
    <div class="custom-table-header">
      <div style="text-align: center;font-weight: 700;"><span>上月计划情况分析</span></div>
      <div class="borderL" style="text-align: center;font-weight: 700;">
        <span>本月工作重点</span></div>
    </div>
    <div class="custom-table-header">
      <div style="text-align: center;"><span>{{tableData[0].lastAnalyse}}</span></div>
      <div class="borderL" style="text-align: center;">
        <span>{{tableData[0].workFocus}}</span></div>
    </div>

    <el-table class="custom-table-main" :data="centerTable" border style="width: 100%" @cell-mouse-enter="enterCell" @cell-mouse-leave="leaveCell" :span-method="spanMethod">  
    <el-table-column prop="activityCurriculum" label="活动课程" align="right" width="80" style="writing-mode: vertical-rl;"><template slot-scope="scope">
        <span style="writing-mode: vertical-lr;letter-spacing: 5px;">{{ scope.row.activityCurriculum }}</span>
      </template>  </el-table-column>  
    <el-table-column prop="territory" label="领域" align="center" header-align="left" width="60"></el-table-column>  
    <el-table-column prop="activityName" label="活动名称" align="center" width="290"></el-table-column>  
    <el-table-column prop="activityTarget" label="活动目标"  align="center"></el-table-column>
  </el-table>

    

    <div class="custom-table-bott">
      <div class="borderBt">
        <span class="borderR">区域课程</span>
        <span class="flex2">安吉</span>
        <span class="flex3">{{activityName}}</span>
        <span class="flex1">{{activityTarget}}</span>
      </div>
      <div class="borderBt">
        <span class="borderR">特色课程</span>
        <span class="flex2">特色</span>
        <span class="flex3">{{activityName}}</span>
        <span class="flex1">{{activityTarget}}</span>
      </div>
      <div class="borderBt">
        <span class="borderR">绘本课程</span>
        <span class="flex2">阅读</span>
        <span class="flex3">{{activityName}}</span>
        <span class="flex1">{{activityTarget}}</span>
      </div>
      <div class="borderBt">
        <span class="borderR">本月主题活动</span
        ><span class="flex1">{{tableData[0].themeActivities}}</span>
      </div>
      <div class="bott">
        <span class="borderR">本月家长工作</span
        ><span class="flex1">{{tableData[0].parentWork}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    centerTable: {
      type: Object,
      default: {},
    },
    // dayList: {
    //   type: Array,
    //   default: ["上午", "下午"],
    // },
  },
  data() {
    return {
      morningActivities: {},
      afternoonActivities: {},
      // tableData: [
      //   {activity: '五大领域园本课程', date2: '健康园本'},
      //   {activity: '五大领域园本课程', date2: '语言园本'},
      //   {activity: '五大领域园本课程', date2: '社会园本'},
      //   {activity: '五大领域园本课程', date2: '科学园本'},
      //   {activity: '五大领域园本课程', date2: '计算园本'},
      //   {activity: '五大领域园本课程', date2: '音乐园本'},
      //   {activity: '五大领域园本课程', date2: '绘画园本'},
      //   // 添加更多数据项...
      // ]
    };
  },
  created() {
    console.log("表格数据",this.centerTable)
    console.log("表格数据2",this.tableData)
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  
      if (columnIndex === 0) { // 第一列需要合并单元格  
        if (rowIndex === 0) { // 如果是第一行，则合并两行  
          return [2, 1]; // 第一个参数是行数，第二个参数是列数  
        } else if (rowIndex % 2 === 1) { // 其他奇数行（从第3行开始）合并到上一行  
          return [0, 0]; // 返回 [0, 0] 以合并到上一行  
        }  
      }  
    },  
     // 自定义合并逻辑
     spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 判断是活动课程列
        if (rowIndex > 0 && row.activityCurriculum === this.centerTable[rowIndex - 1].activityCurriculum) {
          return {
            rowspan: 0,
            colspan: 0,
          };
        } else {
          const count = this.getCount(row.activityCurriculum);
          return {
            rowspan: count,
            colspan: 1,
          };
        }
      }
    },
    // 获取相同值的行数
    getCount(value) {
      return this.centerTable.filter((row) => row.activityCurriculum === value).length;
    },   
    transform(val) {
      console.log('val',val);
      let date = val.split(" "),
      year = date[0];
      year = year.substring(year.indexOf("-") + 1, year.lenght);
      year = parseFloat(year.replace("-", "."));
      return year;
    },
  },
};
</script>
<style lang="scss" scoped>
html body table {height:100%}
.borderT {
  border-top: 1px solid #dfe6ec;
}
.borderL {
  border-left: 1px solid #dfe6ec;
}
.borderBt {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dfe6ec;
  flex-wrap: wrap; /* 允许子元素换行 */
  justify-content: center; /* 水平居中 */
}
.bott {
  display: flex;
  align-items: center;
}
.borderR {
  width: 79px;
  // border-right: 1px solid #dfe6ec;
  text-align: center;
  
  // align-self: stretch; /* 添加这行 */
}
.flex1 {
  flex: 1;
  border-left: 1px solid #dfe6ec;
  align-self: stretch; /* 添加这行 */
}
.flex2 {
  // flex: 1;
  width: 60px;
  border-left: 1px solid #dfe6ec;
  align-self: stretch; /* 添加这行 */
}
.flex3 {
  // flex: 1;
  width: 290.5px;
  border-left: 1px solid #dfe6ec;
  align-self: stretch; /* 添加这行 */
}
.custom-table {
  box-sizing: border-box;
  // text-align: center; /* 水平居中 */
  // align-items: center; /* 垂直居中 */
  .custom-table-title {
    text-align: center;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
  }
  .custom-table-header {
    height: 40px;
    display: flex;
    text-align: left;
    border: 1px solid #dfe6ec;
    border-bottom: none;
    div {
      padding-left: 10px;
      width: 50%;
      height: 40px;
      line-height: 40px;
    }
    div:last-child {
      flex: 1;
    }
  }
  .custom-table-bott {
    display: flex;
    flex-direction: column;
    border: 1px solid #dfe6ec;
    box-sizing: border-box;
    border-top: none;
    div {
      // height: 40px;
      // line-height: 40px;
      span {
        padding: 10px;
        // display: inline-block;
        // width: 120px;
        // margin-right: 10px;
        // text-align: center;
      }
    }
  }
}
::v-deep .el-table__row {
  td:first-child {
    text-align: center;
  }
}
::v-deep .tableBaseInfo {
  .hiddenClass {
    display: none !important;
  }
  .textAlignLeft {
    text-align: left !important;
  }
  .textCustomAlignLeft {
    text-align: left !important;
    font-weight: 700;
    color: #000;
  }
}
::v-deep .no-data .el-table__body-wrapper {
  display: none;
}
::v-deep .firstAppraisal .textAlignRight {
  text-align: right !important;
}
::v-deep .no-header.el-table--border {
  border-top: none !important;
}
::v-deep .no-header .el-table__header-wrapper {
  display: none;
}
::v-deep .no-header-only.el-table--border {
  border-top: none !important;
}
::v-deep .text-set {
  color: #000;
  font-weight: 700;
}
::v-deep .el-table::before {
  height: 0;
}
/* 如果单元格的padding */
.elChgTbeClmn .cell {
  padding: 0px !important;
}
.elHeadCon {
  height: 50px;
  position: relative;
}
.headerCon1 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.headerCon2 {
  position: absolute;
  right: 0;
  top: 0;
}
.headerLine {
  width: 1px;
  height: 150px;
  transform: rotate(-68deg); /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
  background-color: red;
}

.el-table thead.is-group th {
  background: none;
}
.el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none;
}

/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
// ::v-deep .el-table thead.is-group th {
//   background: none;
//   padding: 0px;
// }

// ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
//   border-bottom: none; /*中间的横线去掉*/
// }

// ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
//   text-align: right; /*上边文字靠右*/
// }

// ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
//   text-align: left; /*下边文字靠左*/
// }
/*核心代码*/
// ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
//   content: "";
//   position: absolute;
//   width: 1px;
//   height: 100px; /*斜线的长度*/
//   top: 0;
//   left: 0;
//   background-color: grey;
//   opacity: 0.2;
//   display: block;
//   transform: rotate(-60deg); /*调整斜线的角度*/
//   transform: rotate(-59deg); /*调整斜线的角度*/
//   -webkit-transform-origin: top;
//   transform-origin: top;
// }

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-60deg); /*调整斜线的角度*/
  transform: rotate(-60deg); /*调整斜线的角度*/
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}
.custom-table-main {
  ::v-deep .el-table__row {
    height: 70px;
  }
  ::v-deep .el-table th {
    height: 70px;
  }
}
::v-deep .el-table .el-table__header-wrapper th,
::v-deep .el-table .el-table__fixed-header-wrapper th{
  font-weight: 500;
}
::v-deep .el-table__row{
  td{
    height: 1px;
  }
  td:first-child{
    height: 100%;
    div{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
::v-deep .el-table thead {
  height: 70px;
}
::v-deep .el-table__row {
  .cell {
    display: flex;
    width: 100%;
    height: 100%;
    .morning-activities {
      flex: 1;
    }
  }

}
.morin-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .main-item{
    flex: 1;
    border-right: 1px solid #ccc;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .item-objective{}
  }
  .main-item:last-child{
    border-right: none;
  }
}
::v-deep.el-table .cell {
  // padding-left: 0;
  // padding-right: 0;
}
::v-deep .el-table--medium th,
::v-deep .el-table--medium td {
  padding: 0;
}
</style>
